<template>
	<view class="content">  
		<!-- <my-bar>
			<block slot="content">登录</block>
		</my-bar> -->
		<view class="login-bg" :class="theme">    
			<view class="login-card">
				<view class="login-head">注册</view>
				<view class="login-input login-margin-b"><mInput type="text" v-model="postForm.tel" placeholder="请输入手机号" clearable="true"></mInput></view>
				<view class="login-input login-margin-b">
					<view class="verify">
						<view class="verify-left"> <mInput type="text" v-model="postForm.verifyCode" placeholder="请输入验证码" clearable="true"></mInput></view>
						<view class="verify-right"><button class="verify-btn" :class="theme" type="primary">获取验证码</button></view>
					</view>					
				</view>
				<view class="login-input"><mInput type="password" v-model="postForm.password" placeholder="请设置密码" clearable="true" displayable="true"></mInput></view>
				
			</view>
		</view>
		<view class="login-btn"><button class="landing" :class="theme" type="primary" @click="register()">登陆</button></view>
	</view>
</template>

<script>
import mInput from '../../components/m-input/m-input.vue';
import api from '@/common/api.js';
import { mapState } from 'vuex';
export default {
	components: {
		mInput
	},
	computed: {
		...mapState('base', ['logo', 'appName','theme']),		
	},
	data() {
		return {
			postForm: {
				tel: '',
				verifyCode:'',
				password: '',
				password2: '',
				email: ''
			}
		};
	},
	onLoad() {},
	methods: {
		register() {
			let validRules = [{
				name: 'tel',
				title: "手机号",
				required: true
			}, {
				name: 'password',
				type: 'password',
				title: "密码",
				required: true
			}/* , {
				name: 'password2',
				eq: 'password',
				msg: "两次输入密码不一致"
			} */]
			var r = this.$validate.valid(this.postForm, validRules);
			if (!r.isOk) {
				uni.showToast({
					icon: 'none',
					title: r.msg
				});
			} else { 
				api.reg(this.postForm);
			}
		}
	}
};
</script>

<style>
.landing {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 25rpx;
	font-size: 36rpx;
	/* background: linear-gradient(left,#FF978D, #FFBB69); */
}
.login-btn {
	padding: 10rpx 20rpx;
	margin-top: 400rpx;
}
.login-function {
	overflow: auto;
	padding: 20rpx 20rpx 30rpx 20rpx;
}
.login-forget {
	float: left;
	font-size: 28rpx;
	color: #999;
}
.login-register {
	color: #666;
	float: right;
	font-size: 28rpx;
}
.login-input .m-input-view,.verify {
	background: #f2f5f6;
	font-size: 32rpx;
	padding: 10rpx 25rpx;
	height: 92rpx;
	line-height: 92rpx;
	border-radius: 10rpx;
	color: #666666;
}
.bg-gradual-green .m-input-view,.verify {
	color: #666666;
}
.login-margin-b {
	margin-bottom: 25rpx;
}
.login-input {
	padding: 10rpx 20rpx;
}
.bg-gradual-green .login-head {
	font-size: 42rpx;
	text-align: center;
	font-weight: bold;
	color: #666666;
	padding: 25rpx 10rpx 55rpx 10rpx;
}
.login-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 10rpx 25rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
	position: relative;
	margin-top: 200rpx;
}
.login-bg {
	height: 400rpx;
	padding: 30rpx;
	/* background: linear-gradient(#FF978D, #FFBB69); */
}
.verify{
	display: flex;align-items: center; 
}
.verify-left {
	width: calc(100% - 260upx);
}
.verify-right {
	padding-left: 20upx;
}
.verify-btn {
	height: 80upx;
	line-height: 80upx;
	font-size: 28upx;
	width: 240upx;
	border-radius: 8upx;
	/* background: linear-gradient(left, #ff978d, #ffbb69); */
}
</style>
